<!--
 * @Author: Bennty
 * @Date: 2024-12-18 10:14:03
 * @LastEditors: 
 * @LastEditTime: 2024-12-19 15:20:25
 * @Description: 请填写简介
-->
<template>
    <el-dialog :model-value="props.visible" title="产品库存信息" @close="handleClose">
        <el-form :inline="true" >
            <el-form-item label="客户名称：">{{ props.customers.filter((item:any)=>item.id == props.orderDetails.customerId)[0]?.customerName }}</el-form-item>
            <el-form-item label="产品类别：">{{ customized_order_type.filter((item:any)=>props.orderDetails.productType == item.value)[0]?.label }}</el-form-item>
            <el-form-item label="订单数量：">{{ props.orderDetails.number }}</el-form-item>
            <el-form-item label="当前已生产数量：">{{ }}</el-form-item>
            <el-form-item label="单价：">{{ props.orderDetails.price }}</el-form-item>
        </el-form>
        <el-table :data="inventoryInfoList" v-loading="loading">
            <el-table-column label="部件名称" prop="productName" align="center"></el-table-column>
            <el-table-column label="当前库存" prop="currentInventory" align="center"></el-table-column>
            <el-table-column label="需求数量" prop="needNumber" align="center"></el-table-column>
        </el-table>
        <span class="tips">*注意:库存信息会根据实时生产状态更新，当满足库存要求后即可开始生产</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleClose">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { getInventoryApi } from '@/api/sj/productManagement/customizedOrder';

const props = defineProps<{
    visible: boolean,
    orderDetails: any,
    customers: any[],
    customized_order_type: any[]
}>();
const emits = defineEmits(['close', 'submit']);
const inventoryInfoList = ref<any[]>();
const loading = ref(false);

watch(()=>[props.visible, props.orderDetails], async ([newVisible, newData])=>{
    if(newVisible){
        loading.value = true;
        const {code, data} = await getInventoryApi(newData.id);
        if(code == 200){
            inventoryInfoList.value = data;
            loading.value = false;
        };
    };
});

const handleClose = () => {
    emits('close')
};
</script>

<style lang="scss" scoped>
.tips{
    display: block;
    color: red;
    margin-top: 14px;
}
</style>